import React, { useState } from 'react'
import {inject, observer} from 'mobx-react'

export default inject('todo')(observer(props => {
  console.log(props);
  let [val, setVal] = useState('')
  let {msgArr, changeMsg} = props.todo
  //方法
  const showMsg = () => (
    msgArr && msgArr.map(item => (
      <li key={item.id}>{item.val}</li>
    ))
  )
  //按下键盘
  const keyUp = e => {
    if(e.keyCode === 13) {
      changeMsg(e.target.value)
      setVal('')
    }
  }

  return (
    <div>
      <h1>Mobx 的使用</h1>
      <input type="text" value={val} onChange={e => setVal(e.target.value)} onKeyUp={keyUp} />
      <h2>输入的值：{val}</h2>
      <ul>
        {showMsg()}
      </ul>
    </div>
  )
}))
